<route lang="json5" type="payList">
{
  layout: 'default',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '微信 > 管理（备用）',
    enablePullDownRefresh:false,
    onReachBottomDistance:50,
  },
}
</route>

<script setup lang="ts">
import dayjs from 'dayjs'
import { ref } from 'vue'
import { getPayList } from '@/api/device'

const loadState = ref<'loading' | 'error' | 'finished'>('loading')
const page = ref(1)
const dataList = ref([]) // 列表数据
const total = ref(50) // 总数据量
function loadMore() {
  console.log('滚动到底部加载更多数据')
  if (loadState.value === 'finished') {
    return
  }
  setTimeout(() => {
    // 模拟请求数据
    if (dataList.value.length >= total.value) {
      loadState.value = 'finished'
    }
    else {
      // 每次加载20条
      for (let i = 0; i < 20; i++) {
        dataList.value.push(i)
      }
    }
  }, 1000)
}
onLoad(() => {
  loadMore()
})
onReachBottom(() => {
  if (loadState.value === 'finished') {
    return
  }
  loadMore()
})

const showWXEdit = ref(false)
const wxForm = ref({
  name: 'test',
  account: '2734827329',
  openid: '7381hjsjdbasbd',
  date: dayjs().format('YYYY-MM-DD HH:mm:ss'),
})
const wxRef = ref()
function handleWXEdit() {
  showWXEdit.value = true
  if (wxRef.value) {
    wxRef.value.reset()
  }
}
function handleWXSubmit() {
  wxRef.value.validate().then(({ valid, errors }) => {
    if (valid) {
      console.log('表单验证通过')
      showWXEdit.value = false
    }
    else {
      console.log('表单验证不通过')
    }
  })
}
function handleClose() {
  showWXEdit.value = false
}
</script>

<template>
  <view class="wot-list-top-wrap">
    <view class="wot-row wot-title">
      <wd-row>
        <wd-col :span="8">
          <view class="wot-item">
            名称
          </view>
        </wd-col>
        <wd-col :span="8">
          <view class="wot-item">
            账号
          </view>
        </wd-col>
        <wd-col :span="8">
          <view class="wot-item">
            状态 / 操作
          </view>
        </wd-col>
      </wd-row>
    </view>
  </view>
  <view v-if="dataList.length === 0" class="pt-20">
    <wd-status-tip image="content" tip="暂无内容" />
  </view>
  <view v-else class="wot-list btn-pd">
    <view v-for="(item, index) in dataList" :key="index" class="wot-row">
      <wd-row>
        <wd-col :span="8">
          <view class="wot-item">
            <wd-tag custom-class="tag" type="success">
              test
            </wd-tag>
          </view>
        </wd-col>
        <wd-col :span="8">
          <view class="wot-item">
            <wd-tag custom-class="tag" plain>
              2734827329
            </wd-tag>
          </view>
        </wd-col>
        <wd-col :span="8">
          <view class="wot-item">
            <wd-tag type="primary" custom-class="tag" @click="handleWXEdit()">
              修改
            </wd-tag>
          </view>
        </wd-col>
        <wd-col :span="24">
          <view class="px-40rpx text-24rpx text-#C8C9CC">
            openid: oW_npwodO1F8szshwFAGcDh4kGPE
          </view>
        </wd-col>
      </wd-row>
    </view>
    <wd-loadmore custom-class="loadmore" :state="loadState" @reload="loadMore" />
  </view>
  <view class="footer">
    <wd-button type="primary" size="small" block>
      绑定当前微信
    </wd-button>
    <view class="pb-safe" />
  </view>
  <wd-action-sheet v-model="showWXEdit" title="【 编辑 > 微信 】" @close="handleClose">
    <view class="action-sheet-content">
      <wd-form ref="wxRef" :model="wxForm">
        <wd-cell-group border>
          <wd-input
            v-model="wxForm.name"
            label="名称"
            label-width="100px"
            prop="name"
            clearable
            placeholder="名称"
            :rules="[{ required: true, message: '请填写名称' }]"
          />
          <wd-input
            v-model="wxForm.account"
            label="账号"
            label-width="100px"
            prop="account"
            clearable
            placeholder="账号"
            :rules="[{ required: true, message: '请填写账号' }]"
          />
          <wd-input
            v-model="wxForm.openid"
            label="openid"
            label-width="100px"
            prop="openid"
            clearable
            readonly
          />
          <wd-input
            v-model="wxForm.date"
            label="添加时间"
            label-width="100px"
            prop="date"
            clearable
            readonly
          />
        </wd-cell-group>
        <view class="btn-outer-pd">
          <wd-button type="primary" size="small" block @click="handleWXSubmit">
            提交
          </wd-button>
        </view>
      </wd-form>
    </view>
  </wd-action-sheet>
</template>

<style lang="scss" scoped>
#app {
  height: 100vh;
  overflow: hidden;
}
.footer {
    padding: 30rpx 20%;
    /* #ifdef H5 */
    padding-bottom: 40rpx;
    /* #endif */
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
}
.btn-pd{
  padding-bottom: calc(126rpx + env(safe-area-inset-bottom));
}
</style>
